fix[devtools/e2e]: fixed source inspection in e2e tests #28518

hoxyq · 2024-03-07T17:05:32Z

DevTools e2e tests started to fail after landing #28471:

There are 2 reasons for that:

Versions 16.0 and 16.5 use legacy renderer, which doesn't support source inspection by design:

react/packages/react-devtools-shared/src/backend/legacy/renderer.js

Line 831 in 850fac4

source: null,

The corresponding e2e test is now gated for versions >=16.8
2. For other versions (>=16.8), the source is actually e2e-app-regression.js, because these regression tests open a different page (not the one we open for tests against React from source)

react/packages/react-devtools-inline/playwright.config.js

Lines 15 to 17 in 850fac4

    
           url: process.env.REACT_VERSION 
        
             ? 'http://localhost:8080/e2e-regression.html' 
        
             : 'http://localhost:8080/e2e.html',

EdmondChuiHW

🚀

EdmondChuiHW · 2024-03-07T17:45:04Z

packages/react-devtools-inline/__tests__/__e2e__/components.test.js

+
+    // Then read the inspected values.
+    const sourceText = await page.evaluate(() => {
+      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;


Since this is an E2E test, is there a way to do this without reaching into the internals?

Yes, there is definitely a way to just use query selectors, but this is probably required for more complex cases with inputs

Internals are injected in

react/packages/react-devtools-shell/src/e2e/devtools.js

Lines 60 to 61 in 850fac4

// ReactDOM Test Selector APIs used by Playwright e2e tests

window.parent.REACT_DOM_DEVTOOLS = ReactDOM;

This was added in #22978, I think #22978 (comment) is one of the reasons.

DevTools e2e tests started to fail after landing facebook#28471: - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798270 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798275 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798271 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798274 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798269 There are 2 reasons for that: 1. Versions 16.0 and 16.5 use legacy renderer, which doesn't support source inspection by design: https://github.com/facebook/react/blob/850fac4915864a487e7cb9ecae8a75dbac144174/packages/react-devtools-shared/src/backend/legacy/renderer.js#L831 The corresponding e2e test is now gated for versions >=16.8 2. For other versions (>=16.8), the source is actually `e2e-app-regression.js`, because these regression tests open a different page (not the one we open for tests against React from source) https://github.com/facebook/react/blob/850fac4915864a487e7cb9ecae8a75dbac144174/packages/react-devtools-inline/playwright.config.js#L15-L17

Full list of changes: * Look for a ReactMemoCacheSentinel on state ([gsathya](https://github.com/gsathya) in [#28831](#28831)) * Use use() in the Cache if available ([sebmarkbage](https://github.com/sebmarkbage) in [#28793](#28793)) * feat[devtools-fusebox]: support theme option ([hoxyq](https://github.com/hoxyq) in [#28832](#28832)) * feat[devtools]: add package for fusebox integration ([hoxyq](https://github.com/hoxyq) in [#28553](#28553)) * feat[devtools]: add method for connecting backend with custom messaging protocol ([hoxyq](https://github.com/hoxyq) in [#28552](#28552)) * Rename SECRET INTERNALS to `__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE` ([sebmarkbage](https://github.com/sebmarkbage) in [#28789](#28789)) * Flatten ReactSharedInternals ([sebmarkbage](https://github.com/sebmarkbage) in [#28783](#28783)) * feat[devtools]: ship source maps for content scripts and ignore list installHook script ([hoxyq](https://github.com/hoxyq) in [#28730](#28730)) * Track Owner for Server Components in DEV ([sebmarkbage](https://github.com/sebmarkbage) in [#28753](#28753)) * Move ReactDOMLegacy implementation into RootFB ([sebmarkbage](https://github.com/sebmarkbage) in [#28656](#28656)) * Reland #28672: Remove IndeterminateComponent ([gnoff](https://github.com/gnoff) in [#28681](#28681)) * Remove reference to deleted <Cache> in un-linted file ([josephsavona](https://github.com/josephsavona) in [#28715](#28715)) * [be] Remove unshipped experimental <Cache> element type ([josephsavona](https://github.com/josephsavona) in [#28698](#28698)) * Revert "Remove module pattern function component support" ([rickhanlonii](https://github.com/rickhanlonii) in [#28670](#28670)) * Remove module pattern function component support ([gnoff](https://github.com/gnoff) in [#27742](#27742)) * [RTR] Enable warning flag ([jackpope](https://github.com/jackpope) in [#28419](#28419)) * Update error messages ([rickhanlonii](https://github.com/rickhanlonii) in [#28652](#28652)) * fix[devtools/ci]: split profiling cache test for different react versions and toEqual checker ([hoxyq](https://github.com/hoxyq) in [#28628](#28628)) * Guard against legacy context not being supported in DevTools fixture ([eps1lon](https://github.com/eps1lon) in [#28596](#28596)) * Use `declare const` instead of `declare var` ([kassens](https://github.com/kassens) in [#28599](#28599)) * Update isConcurrent RTR option usage ([jackpope](https://github.com/jackpope) in [#28546](#28546)) * Disable legacy context ([kassens](https://github.com/kassens) in [#27991](#27991)) * Remove invokeGuardedCallback and replay trick ([sebmarkbage](https://github.com/sebmarkbage) in [#28515](#28515)) * Remove remaining usages of ReactTestUtils in tests unrelated to `react-dom/test-util` ([eps1lon](https://github.com/eps1lon) in [#28534](#28534)) * fix[devtools/e2e]: fixed source inspection in e2e tests ([hoxyq](https://github.com/hoxyq) in [#28518](#28518)) * Devtools: Display actual pending state when inspecting `useTransition` ([eps1lon](https://github.com/eps1lon) in [#28499](#28499))

DevTools e2e tests started to fail after landing #28471: - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798270 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798275 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798271 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798274 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798269 There are 2 reasons for that: 1. Versions 16.0 and 16.5 use legacy renderer, which doesn't support source inspection by design: https://github.com/facebook/react/blob/850fac4915864a487e7cb9ecae8a75dbac144174/packages/react-devtools-shared/src/backend/legacy/renderer.js#L831 The corresponding e2e test is now gated for versions >=16.8 2. For other versions (>=16.8), the source is actually `e2e-app-regression.js`, because these regression tests open a different page (not the one we open for tests against React from source) https://github.com/facebook/react/blob/850fac4915864a487e7cb9ecae8a75dbac144174/packages/react-devtools-inline/playwright.config.js#L15-L17 DiffTrain build for commit 447fc27.

fix[devtools/e2e]: fixed source inspection in e2e tests

d5e5b9d

hoxyq requested review from EdmondChuiHW, huntie and robhogan March 7, 2024 17:05

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Mar 7, 2024

EdmondChuiHW approved these changes Mar 7, 2024

View reviewed changes

hoxyq merged commit 447fc27 into facebook:main Mar 7, 2024
38 checks passed

hoxyq deleted the devtools/fix-e2e-tests branch March 7, 2024 17:59

ztanner mentioned this pull request Mar 18, 2024

Update React from 6c3b8dbfe to a4939017f vercel/next.js#63413

Closed

gnoff mentioned this pull request Mar 25, 2024

Update React from 14898b6a9 to e373190fa vercel/next.js#63685

Closed

ztanner mentioned this pull request Apr 2, 2024

Update React from 14898b6a9 to a870b2d54 vercel/next.js#63976

Closed

hoxyq mentioned this pull request Apr 15, 2024

React DevTools 5.0.2 -> 5.1.0 #28840

Merged

eps1lon mentioned this pull request Apr 19, 2024

Update React from 14898b6a9 to c3048aab4 vercel/next.js#64798

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix[devtools/e2e]: fixed source inspection in e2e tests #28518

fix[devtools/e2e]: fixed source inspection in e2e tests #28518

hoxyq commented Mar 7, 2024 •

edited

Loading

EdmondChuiHW left a comment

EdmondChuiHW Mar 7, 2024 •

edited

Loading

hoxyq Mar 7, 2024

	url: process.env.REACT_VERSION
	? 'http://localhost:8080/e2e-regression.html'
	: 'http://localhost:8080/e2e.html',

	// ReactDOM Test Selector APIs used by Playwright e2e tests
	window.parent.REACT_DOM_DEVTOOLS = ReactDOM;

fix[devtools/e2e]: fixed source inspection in e2e tests #28518

fix[devtools/e2e]: fixed source inspection in e2e tests #28518

Conversation

hoxyq commented Mar 7, 2024 • edited Loading

EdmondChuiHW left a comment

Choose a reason for hiding this comment

EdmondChuiHW Mar 7, 2024 • edited Loading

Choose a reason for hiding this comment

hoxyq Mar 7, 2024

Choose a reason for hiding this comment

hoxyq commented Mar 7, 2024 •

edited

Loading

EdmondChuiHW Mar 7, 2024 •

edited

Loading